<template>
  <div>
    <el-card style="margin-bottom: 14px;">
      <el-page-header @click="onBack" :icon="ArrowLeft">
        <template #content>
          <span class="text-large font-600 mr-3">{{ goodsTitle }}</span>
        </template>
      </el-page-header>
    </el-card>
    <el-card class="goods-card" :body-style="{ paddingTop: '0px' }">
      <el-tabs v-model="activeName" tab-position="top" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in componentsArr" :key="index" :label="item.label" :name="item.name">
          <component v-model="goodsItem" :is="item.component"></component>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="activeNameLow" type="primary">
        上一步
      </el-button>
      <el-button @click="activeNameAdd" type="primary">{{ btnText }}</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import api from '@/api'
import { classListItem } from '@/api/modules/goodsList'
import type { TabsPaneContext } from 'element-plus'
import BasicInformation from './tabs/BasicInformation.vue'
import GoodsDetail from './tabs/goodsDetail.vue'
import LogisticsSet from './tabs/LogisticsSet.vue'
import MarketingSet from './tabs/MarketingSet.vue'
import OtherSet from './tabs/OtherSet.vue'
import StokeNumber from './tabs/StokeNumber.vue'
import { ElMessage } from 'element-plus'
const componentsArr = [
  { label: "基础信息", name: 0, component: BasicInformation },
  { label: "规格库存", name: 1, component: StokeNumber },
  { label: "商品详情", name: 2, component: GoodsDetail },
  { label: "物流设置", name: 3, component: LogisticsSet },
  { label: "营销设置", name: 4, component: MarketingSet },
  { label: "其他设置", name: 5, component: OtherSet },
]
// onBeforeRouteLeave(()=>{
//   return false
// })
//// 新增或修改的商品对象
const goodsItem = ref({})
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab)
}
const router = useRouter();
const route = useRoute()
// 一件商品的详情
const activeName = ref(0)
const activeNameLow = () => {
  activeName.value--
  if (activeName.value < 0) {
    activeName.value = 0
  }
}
const activeNameAdd = async () => {
  activeName.value++
  if (activeName.value >= 6) {
    activeName.value = 0
    //  发送添加商品的请求
    if (route.params._id) {
      updateOneGoods()
    } else {
      addOneGoods()
    }
  }
}
// 添加一件商品
const addOneGoods = async () => {
  let par = goodsItem.value
  const res = await api.goodsList.add(par)
  if (res.code == 200) {
    ElMessage.success("商品添加成功")
    console.log(res, 333);

  } else {
    ElMessage.error(res.message)
  }
}
// 修改商品
const updateOneGoods = async () => {
  let par = goodsItem.value
  const res = await api.goodsList.update({ ...par })
  if (res.code == 200) {
    ElMessage.success("商品修改成功")
  } else {
    ElMessage.error(res.message)
  }
}
// 点击返回
const onBack = () => {
  router.back()
}
// 获取需要编辑的数据
onMounted(() => {
  // console.log(route.params._id);
  if (route.params._id) {
    getOneGoodsById()
  }
})
// 获取商品的详情
const getOneGoodsById = async () => {
  const res = await api.goodsList.detailId({ _id: route.params._id })
  goodsItem.value = res.data
}
//标题改变
const goodsTitle: any = computed(() => {
  if (route.params._id) {
    return "修改商品"
  }
  return "添加商品"
})
const btnText = computed(() => {
  if (route.params._id) {
    if (activeName.value == 5) {
      return "保存"
    } else {
      return "下一页"
    }
  } else {
    if (activeName.value == 5) {
      return "添加"
    } else {
      return "下一页"
    }
  }

})
</script>
